<template>
  <div class="app-container">
    <div class="distributionStatsBase">
      <div class="distributionStatsItem">
        <div class="distributionAmount">{{ distributionStatsData.distributionAmount }}元</div>
        <div class="distributionDesc">总佣金</div>
      </div>
      <div class="distributionStatsItem">
        <div class="distributionAmount">{{ distributionStatsData.oneDistributionAmount }}元</div>
        <div class="distributionNumber">{{ distributionStatsData.oneDistributionNumber }}笔</div>
        <div class="distributionDesc">一级佣金</div>
      </div>
      <div class="distributionStatsItem">
        <div class="distributionAmount">{{ distributionStatsData.twoDistributionAmount }}元</div>
        <div class="distributionNumber">{{ distributionStatsData.twoDistributionNumber }}笔</div>
        <div class="distributionDesc">二级佣金</div>
      </div>
    </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="微信信息:" prop="nickname">
        <el-input
          style="width: 300px"
          v-model="queryParams.nickname"
          placeholder="请输入微信昵称"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="是否员工" prop="isStaff">
        <el-select style="width: 300px" v-model="queryParams.isStaff" placeholder="请选择" clearable>
          <el-option key="0" label="全部" value="0"/>
          <el-option key="1" label="是" value="1"/>
          <el-option key="2" label="否" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList">
      <el-table-column label="排名" type="index" width="100">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="微信信息" width="300">
        <template slot-scope="scope">
          <div class="wxInfoBase">
            <div class="wxInfoImg">
              <image-preview class="avatarUrl" :src="scope.row.avatarUrl"/>
            </div>
            <div class="wxInfoContent">
              <div class="nicknameInfo">{{ scope.row.nickname }}</div>
              <div class="idInfo">ID:{{ scope.row.wxId }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否员工" prop="isStaff" key="isStaff"/>
      <el-table-column label="一级佣金" key="oneDistributionNumber">
        <template slot-scope="scope">
          <div>{{ scope.row.oneDistributionNumber }}单</div>
          <div>{{ scope.row.oneDistributionAmount }}元</div>
        </template>
      </el-table-column>
      <el-table-column label="二级佣金" key="">
        <template slot-scope="scope">
          <div>{{ scope.row.twoDistributionNumber }}单</div>
          <div>{{ scope.row.twoDistributionAmount }}元</div>
        </template>
      </el-table-column>
      <el-table-column label="返佣总计">
        <template slot-scope="scope">
          <div>{{ scope.row.distributionNumber }}单</div>
          <div>{{ scope.row.distributionAmount }}元</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="goViewDistributionOrderList(scope.row)"
          >查看分销订单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog :title="distributionOrderTitle" :visible.sync="distributionOrderOpen" width="900px" :inlist="true">
      <el-table ref="multipleTable" :data="distributionOrderDataList">
        <el-table-column label="报名用户" width="200">
          <template slot-scope="scope">
            <div class="wxInfoBase">
              <div class="wxInfoImg">
                <image-preview class="avatarUrl" :src="scope.row.avatarUrl"/>
              </div>
              <div class="wxInfoContent">
                <div class="nicknameInfo">{{ scope.row.nickname }}</div>
                <div class="idInfo">ID:{{ scope.row.wxId }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="报名信息" key="enrollName">
          <template slot-scope="scope">
            <div>{{ scope.row.enrollName }}</div>
            <div>{{ scope.row.enrollMobile }}</div>
          </template>
        </el-table-column>
        <el-table-column label="报名商品" prop="goodsName" key="goodsName"/>
        <el-table-column label="支付金额" prop="realityPayAmount" key="realityPayAmount">
          <template slot-scope="scope">
            <span v-if="scope.row.realityPayAmount">{{ scope.row.realityPayAmount }}元</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="分销等级" prop="distributionGrade" key="distributionGrade">
          <template slot-scope="scope">
            <span v-if="scope.row.distributionGrade == 1">一级分销</span>
            <span v-else-if="scope.row.distributionGrade == 2">二级分销</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="分销金额" prop="kickback" key="kickback">
          <template slot-scope="scope">
            <span v-if="scope.row.kickback">{{ scope.row.kickback }}元</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="distributionOrderTotal>0"
        :total="distributionOrderTotal"
        :page.sync="distributionOrderQueryParams.pageNum"
        :limit.sync="distributionOrderQueryParams.pageSize"
        @pagination="getDistributionOrderList()"
      />
    </el-dialog>
  </div>
</template>

<script>
import { distributionStats,distributionRecordList } from "@/api/triones/activity";
import { distributionOrderList } from "@/api/triones/order";

export default {
  name: "distributionRecord",
  data() {
    return {
      distributionStatsData: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        activityId: undefined,
        nickname: undefined,
        isStaff: undefined
      },
      dataList: [],
      total: 0,
      distributionOrderQueryParams: {
        pageNum: 1,
        pageSize: 10,
        memberId: undefined,
        activityId: undefined
      },
      distributionOrderTitle: undefined,
      distributionOrderOpen: false,
      distributionOrderDataList: [],
      distributionOrderTotal: 0
    }
  },
  created() {
    this.queryParams.activityId = this.$route.query.activityId
    this.getDistributionStats();
    this.getList();
  },
  methods: {
    /** 分销统计 */
    getDistributionStats() {
      distributionStats(this.$route.query.activityId).then(response => {
        this.distributionStatsData = response.data;
      })
    },
    /** 获取分销记录列表 */
    getList() {
      distributionRecordList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
      })
    },
    /** 重置 */
    resetQuery() {
      this.resetForm('queryForm');
      this.handleQuery();
    },
    /** 检索 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查看分销订单列表 */
    goViewDistributionOrderList(row) {
      this.distributionOrderQueryParams.activityId = this.$route.query.activityId;
      this.distributionOrderQueryParams.pageNum = 1;
      this.distributionOrderQueryParams.memberId = row.memberId;
      this.distributionOrderTitle = row.nickname + '的分销订单';
      this.getDistributionOrderList();
      this.distributionOrderOpen = true;
    },
    /** 获取用户的分销订单列表 */
    getDistributionOrderList() {
      distributionOrderList(this.distributionOrderQueryParams).then(response => {
        this.distributionOrderDataList = response.rows;
        this.distributionOrderTotal = response.total;
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.distributionStatsBase {
  display: flex;
  gap: 10px;
  padding-bottom: 20px;
  .distributionStatsItem {
    background-color: #fafafa;
    width: 210px;
    height: 90px;
    text-align: center;
    align-content: center;
  }
  .distributionDesc {
    font-size: 14px;
    font-weight: bold;
  }
  .distributionAmount {
    font-size: 14px;
    font-weight: bold;
  }
  .distributionNumber {
    font-size: 12px;
  }
}

.wxInfoBase {
  display: flex;
  justify-items: center;
  .wxInfoImg {
    align-content: center;
  }
  .avatarUrl {
    vertical-align: middle;
    width: 50px;
    height: 50px;
  }
  .wxInfoContent {
    align-content: center;
    padding-left: 15px;
    font-size: 12px;
    .nicknameInfo {
      line-height: 14px;
      font-weight: bold;
    }
    .idInfo {
      color: rgba(0,0,0,0.5);
      line-height: 14px;
    }
  }
}
</style>
